<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
    <script src='../js/vue.js'></script>
    <script>
        // const app = new Vue({
        //     el:'#app',
        //     data:{

        //     },
        //     methods:{

        //     }
        // })
        //1.filter函数的使用
        const nums = [10, 45, 101, 35, 444, 323];
        let newNums = nums.filter((n) => {
            //当返回结果为:true, 函数内部会自动将这次回调的n加入到新数组中
            //false时，函数内部自动过滤此次n
            return n < 100;
        })
        console.log("1.结果:", newNums);

        //2.map函数的使用
        let newNums2 = newNums.map((n) => {
            return n * 2;
        })
        console.log('2.结果:', newNums2);

        //3.reduce的使用
        //作用:对数组中所有内容进行汇总
        let total = newNums2.reduce((preVal,n) => {
            return preVal + n;
        },0)
        console.log("3.结果:", total);

        //4.联合写法求总和
        let sum = nums.filter((n) =>{
            return n < 100;
        }).map((n) => {
            return n * 2
        }).reduce((preVal, n) =>{
            return preVal + n;
        },0);
        console.log('4.结果:', sum);

        //5.简介写法
        let sum1 = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
        console.log('5.结果:', sum1);
    </script>
</body>

</html>